<template>
  <div id=Comp-container>
    <a href="#" @click="handleChange(1)" 
    :class="{disabled:current==1}">|&lt;&lt;</a>
    <a href="#" @click="handleChange(current-1)"
    :class="{disabled:current==1}"
    >&lt;&lt;</a>
    <a href="#" v-for="item,i in numbers" 
    :class="{active:current==item}" 
    @click="handleChange(item)"
    :key="i">{{item}}</a>
    <a href="#" @click="handleChange(current+1)"
    :class="{disabled:current==handlePageNum}"
    >&gt;&gt;</a>
    <a href="#" @click="handleChange(handlePageNum)" 
    :class="{disabled:current==handlePageNum}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
  props:{
    current:{
      type:Number,//當前頁面
      default:1
    },
    total:{
      type:Number,//總共的數據
      default:21
    },
    visable:{
      type:Number,//可見的頁碼數
      default:10
    },
    pageData:{
      type:Number,//頁面最多展示的數據
      default:10
    },
    
  },
  computed:{
    handlePageNum(){
      return Math.ceil(this.total/this.pageData)//页面数量展示
    },
    minPage(){
      let min = this.current-Math.floor(this.visable/2)
      if(min<1){
        min = 1
      }
      return min
    },
    maxPage(){
      let max = this.minPage + this.visable -1
      if(max>this.handlePageNum){
        max = this.handlePageNum
      }
      return max
    },
    numbers(){
      let arr = []
      for(let i = this.minPage;i<=this.maxPage;i++){
        arr.push(i)
      }
      return arr
    }
  },
  data(){
    return{
    }
  },
  methods:{
    handleChange(value){
      console.log(value)
      this.$emit("changePage",value)
    }
  }
}
</script>

<style scope>
  #Comp-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #Comp-container a{
    color: brown;
    margin: 0 6px;
    text-decoration: none;
  }
  #Comp-container a:hover{
    text-decoration: underline;
  }
  #Comp-container .active{
    color: black;
  }
  #Comp-container .disabled{
    cursor: not-allowed;
  }
</style>